<template>
  <el-color-picker title="一键换肤" class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" @change="changeTheme"></el-color-picker>
</template>

<script lang="ts" setup>
const ORIGINAL_THEME = '#409EFF' // #409EFF default color
import { useAppStore } from '@/store';
import { getCurrentInstance, ref, watch } from 'vue';
let store = useAppStore();
let theme = ref(ORIGINAL_THEME);
const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(['change'])
watch(()=>theme.value,(val, oldVal)=>{
    if (typeof val !== 'string' || !val) return
    store.state.themeColor =val;
    proxy.$message({
        message: '换肤成功',
        type: 'success'
    });
    document.body.className = '';
    store.state.themeVal='light';
    emit('change');
})
watch(()=>store.state.themeVal,(newVal, oldVal)=>{
    if(newVal){
        theme.value = '';
    }
})
let changeTheme=(val)=> {
    if(!val){
        document.body.className = 'light';
        store.state.themeVal='light';
    }
    store.setVarStyle('--el-color-primary', val);//主题颜色
};
</script>

<style lang="scss">
.theme-picker .el-color-picker__trigger {
    vertical-align: middle;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
    display: none;
}
</style>